<template>
  <div class="transfer-wrap">
    <div class="tags">
      <div class="tags-line" :class="{'tags-line-active':!typeFlag}"></div>
      <div class="tags-item" :class="{'tags-active':typeFlag}" @click="typeSwitch(true)">
        <span>转入</span>
      </div>
      <div class="tags-item" :class="{'tags-active':!typeFlag}" @click="typeSwitch(false)">
        <span>转出</span>
      </div>
    </div>
    <!-- 转入 -->
    <div class="transfer-content">
      <div class="wallet">
        <div class="wallet-item">
          <p>代理钱包</p>
          <count-to
            :start-val="0"
            :decimals="2"
            :end-val="+agencyMoney || 0"
            :duration="300"
            class="card-panel-num"
          />
          <span>可用余额（元）</span>
        </div>
        <div class="img">
          <img v-if="typeFlag" src="@/assets/capital/icon2.png" alt />
          <img v-else src="@/assets/capital/icon1.png" alt />
        </div>
        <div class="wallet-item">
          <p>
            {{walletTxt}}
            <img src="../../assets/capital/icon3.png" alt @click="checkHandle" />
          </p>
          <count-to
            :start-val="0"
            :decimals="2"
            :end-val="+otherWallet.money || 0"
            :duration="300"
            class="card-panel-num"
          />
          <span>可用余额（元）</span>
        </div>
      </div>
      <div class="inp-wrap">
        <p>{{typeFlag ? '转入金额（元）' : '转出金额（元）'}}</p>
        <div class="inp-box">
          <span>￥</span>
          <input
            type="number"
            v-model="reqParams.money"
            :placeholder="typeFlag? '请输入转入金额' : '请输入转出金额' "
            @keydown="handleInput2"
          />
          <span @click="totalHandle">全部</span>
        </div>
      </div>

      <div class="btn-wrap" @click="transferHandle">
        <span
          v-if="typeFlag"
          :class="{'btn-color':+reqParams.money && +reqParams.money <= +otherWallet.money }"
        >确认转入</span>
        <span
          v-else
          :class="{'btn-color':+reqParams.money && +reqParams.money <= +agencyMoney }"
        >确认转出</span>
      </div>
    </div>
    <div class="tips">
      <p>
        <span>*</span>温馨提示
      </p>
      <p>精选钱包与代理钱包互转免手续费</p>
    </div>

    <van-popup
      class="popup-box"
      v-model="popupFlag"
      round
      closeable
      position="bottom"
      close-icon-position="top-left"
    >
      <p class="title">选择钱包</p>
      <div
        class="item"
        v-for="(item,index) in walletlist"
        :key="index"
        @click="walletSwitch(item,index)"
      >
        <p v-if="item.type == 'ordinary'">普通钱包</p>
        <p v-else-if="item.type == 'special'">精选钱包</p>
        <p v-else-if="item.type == 'seller'">优选钱包</p>
        <span>余额 {{item.usable_money}}（元）</span>
        <img v-show="walletFlag == index" src="../../assets/capital/icon4.png" alt />
      </div>
    </van-popup>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import { getWalletlist, transfer } from "@/api/capital";
import { Notify } from "vant";
export default {
  data() {
    return {
      typeFlag: true,
      popupFlag: false,
      walletFlag: 0,
      capitalData: {},
      walletlist: [],
      reqParams: {
        money: "",
        type: "",
        wallet: "",
      },
      walletTxt: "其它钱包",
      agencyMoney: "",
      otherWallet: {
        type: "",
        money: "",
      },
    };
  },
  components: {
    CountTo,
  },
  created() {
    this._getWalletlist();
  },
  methods: {
    handleInput2(e) {
      e.target.value = e.target.value.match(/^\d*(\.?\d{0,1})/g)[0] || null;
    },
    typeSwitch(flag) {
      if (this.typeFlag != flag) {
        this.typeFlag = flag;
        this.reqParams.money = "";
      }
    },
    checkHandle() {
      this.popupFlag = true;
    },
    walletSwitch(item, index) {
      this.walletFlag = index;
      this.otherWallet.type = item.type;
      this.otherWallet.money = item.usable_money;
      this.reqParams.wallet = item.type;
      this.popupFlag = false;
    },
    // 全部
    totalHandle() {
      this.reqParams.money = this.typeFlag
        ? this.otherWallet.money
        : this.agencyMoney;
    },
    // 确认转入/转出
    transferHandle() {
      this.reqParams.type = this.typeFlag ? "TRANSFER_IN" : "TRANSFER_OUT";
      console.log(this.typeFlag ? "转入参数" : "转出参数", this.reqParams);
      if (this.typeFlag && +this.otherWallet.money == 0) {
        Notify({
          type: "warning",
          message: this.walletTxt + "余额不足",
        });
      } else if (!this.typeFlag && +this.agencyMoney == 0) {
        Notify({
          type: "warning",
          message: "代理钱包余额不足",
        });
      } else if (!+this.reqParams.money) {
        Notify({
          type: "warning",
          message: this.typeFlag ? "请输入转入金额" : "请输入转出金额",
        });
      } else if (
        +this.reqParams.money > +this.otherWallet.money &&
        this.typeFlag
      ) {
        Notify({ type: "warning", message: this.walletTxt + "可用余额不足" });
      } else if (+this.reqParams.money > +this.agencyMoney && !this.typeFlag) {
        Notify({ type: "warning", message: "代理钱包可用余额不足" });
      } else {
        this.$toast.loading({
          duration: 0,
          message: this.typeFlag ? "正在转入" : "正在转出",
          forbidClick: true,
          loadingType: "spinner",
        });
        transfer(this.reqParams)
          .then((res) => {
            if (res.code == 1) {
              // this.$dialog
              //   .confirm({
              //     className: "webTip-dialog",
              //     title: this.typeFlag ? "资金转入成功" : "资金转出成功",
              //     message: this.typeFlag ? "是否继续转入" : "是否继续转出",
              //     confirmButtonText: this.typeFlag ? "继续转入" : "继续转出",
              //     cancelButtonText: "回到首页",
              //   })
              //   .then(() => {
              //     this.reqParams.money = "";
              //     this.reqParams.type = "";
              //     this.reqParams.wallet = "";
              //     this.walletlist = [];
              //     this._getWalletlist();
              //   })
              //   .catch(() => {
              //     this.$router.push({
              //       name: "me",
              //     });
              //   });
              Notify({
                type: "success",
                message: this.typeFlag ? "转入成功" : "转出成功",
              });
              this.reqParams.money = "";
              // window.location.href = process.env.VUE_APP_BASE_YMW_M;
              setTimeout(() => {
                // this.$router.push({
                //   name: "me",
                //   query: {
                //     transfer: true,
                //   },
                // });
                window.location.href = process.env.VUE_APP_BASE_YMW_M;
              }, 300);
            } else {
              Notify({
                type: "warning",
                message:
                  res.mag || this.typeFlag
                    ? "转入失败，请重试"
                    : "转出失败，请重试",
              });
            }
          })
          .finally(() => {
            this.$toast.clear();
          });
      }
    },
    // 获取钱包列表
    _getWalletlist() {
      this.$toast.loading({
        duration: 0,
        message: "数据加载中",
        forbidClick: true,
        loadingType: "spinner",
      });
      getWalletlist()
        .then((res) => {
          let arr = [];
          if (res.code == 1) {
            this.agencyMoney = res.data.agency.usable_money;
            for (let i in res.data.wallet_list) {
              console.log(i);
              this.walletlist.push(res.data.wallet_list[i]);
              arr.push(i);
            }
            for (let i = 0; i < arr.length; i++) {
              this.walletlist[i].type = arr[i];
            }
            // this.walletlist = res.data;
            console.log("钱包列表", this.walletlist);
            this.reqParams.wallet = this.walletlist[0].type;
            this.otherWallet.type = this.walletlist[0].type;
            this.otherWallet.money = this.walletlist[0].usable_money;
            if (this.otherWallet.type == "ordinary") {
              this.walletTxt = "普通钱包";
            } else if (this.otherWallet.type == "special") {
              this.walletTxt = "精选钱包";
            } else if (this.otherWallet.type == "seller") {
              this.walletTxt = "优选钱包";
            }
          } else {
            Notify({
              type: "warning",
              message: res.mag || "钱包数据获取失败，请稍后再试",
            });
          }
        })
        .catch(() => {
          Notify({
            type: "warning",
            message: res.mag || "钱包数据获取失败，请稍后再试",
          });
        })
        .finally(() => {
          this.$toast.clear();
        });
    },
  },
};
</script>

<style lang="scss">
.transfer-wrap {
  .popup-box {
    padding-bottom: 54px;
    &.van-popup--bottom.van-popup--round {
      border-radius: 10px 10px 0 0;
    }
    .van-popup__close-icon {
      font-size: 16px;
      top: 17px;
    }
  }
}
</style>

<style lang='scss' scoped>
.transfer-wrap {
  width: 100%;
  height: 100vh;
  background: #f7f7f7;
  color: #111;
  .tags {
    width: 100%;
    height: 80px;
    line-height: 90px;
    display: flex;
    justify-content: space-between;
    position: relative;
    background: #fff;
    .tags-line {
      width: 50%;
      position: absolute;
      left: 0;
      bottom: 0;
      transition: all 0.3s;
      &.tags-line-active {
        left: 50%;
      }
      &::after {
        content: "";
        width: 128px;
        height: 4px;
        background: #fe6018;
        border-radius: 2px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .tags-item {
      width: 50%;
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      box-sizing: border-box;
      &.tags-active {
        color: #fe6018;
      }
    }
  }
  .transfer-content {
    padding: 0 25px;
    .wallet {
      display: flex;
      justify-content: space-between;
      margin: 30px 0 25px 0;
      .wallet-item {
        width: 43%;
        height: 160px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding: 23px 0 0 18px;
        text-align: left;
        p {
          position: relative;
          img {
            width: 22px;
            height: 23px;
            position: absolute;
            top: 45%;
            right: 20px;
            transform: translateY(-50%);
          }
        }
        span {
          color: #999;

          &.card-panel-num {
            color: #111;
            font-size: 30px;
            padding: 20px 0 16px 0;
            font-weight: bold;
          }
        }
      }
      .img {
        position: relative;
        img {
          width: 57px;
          height: 44px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .inp-wrap {
      width: 100%;
      background: #fff;
      p {
        font-size: 30px;
        font-weight: 500;
        border-bottom: 1px solid #f7f7f7;
        line-height: 100px;
        text-align: left;
        padding-left: 17px;
      }
      .inp-box {
        display: flex;
        justify-content: space-between;
        line-height: 100px;
        input {
          flex: 1;
          font-size: 30px;
          margin-left: 10px;
          &::placeholder {
            color: #999;
          }
        }
        span {
          &:first-of-type {
            font-size: 60px;
            font-weight: bolder;
            padding-left: 8px;
          }
          &:last-of-type {
            font-size: 30px;
            color: #387eff;
            margin-right: 20px;
          }
        }
      }
    }
    .btn-wrap {
      width: 700px;
      margin: 0 auto;
      span {
        display: inline-block;
        width: 100%;
        height: 86px;
        font-size: 30px;
        font-weight: 400;
        color: #fffefe;
        margin: 70px 0 30px 0;
        line-height: 86px;
        background: linear-gradient(-90deg, #ffbfa3 0%, #ffd49a 100%);
        letter-spacing: 3px;
        border-radius: 4px;
        &.btn-color {
          background: linear-gradient(90deg, #ff9303, #fe6018);
        }
      }
    }
  }

  .tips {
    text-align: left;
    font-size: 26px;
    color: #999999;
    line-height: 46px;
    letter-spacing: 3px;
    padding: 0 30px;
    span {
      color: red;
      padding-right: 10px;
    }
  }
  .popup-box {
    .title {
      width: 100%;
      line-height: 100px;
      font-size: 32px;
      border-bottom: 1px solid #f2f2f2;
    }
    .item {
      width: 100%;
      height: 108px;
      border-bottom: 1px solid #f2f2f2;
      text-align: left;
      padding: 0 25px;
      padding-top: 20px;
      position: relative;
      p {
        font-size: 30px;
        padding-bottom: 15px;
      }
      span {
        color: #999999;
      }
      img {
        width: 26px;
        height: 18px;
        position: absolute;
        top: 50%;
        right: 25px;
        transform: translateY(-50%);
      }
    }
  }
}
</style>